<template>
    <div>
        <div class="index">
            <div class="w1">
                <!-- <span v-for="i in nalist" :key="i" :style="[{color: na == i?'#00c3ff':''},{borderBottom: na == i?'3px solid #00c3ff':''}]">{{i}}</span> -->
                <div class="w1_1">
                    <p>我的合集</p>
                </div>
                <div class="w1_2">
                    <p>创建合集</p>
                    <p>排序</p>
                </div>
            </div>
            <div class="w22">
                <div class="index1" v-if="the_data1 !== null">
                    <div class="w2" v-for="i in 10" :key="i">
                        <router-link to="/usercenter">
                            <div class="w2_1">
                                <img class="img1" src="https://img-static.mihoyo.com/communityweb/upload/default_collection_cover.png?x-oss-process=image/resize,s_150/quality,q_80/auto-orient,0/interlace,1/format,jpg" alt="">
                                <!-- <img class="img2" src="../../assets/img/v.png" alt=""> -->
                                <div class="w2_2">
                                    <span>缺萌萌</span>
                                    <span>cdsdv</span>
                                    <span>0篇作品·0浏览·05-12</span>
                                </div>
                            </div>
                            </router-link>
                        <!-- <div class="plk">
                            <p>关注</p>
                        </div> -->
                    </div>
                </div>
                <div class="index1" v-if="the_data1 === null">
                    <img src="https://bbs.mihoyo.com/_nuxt/img/noData.a3d7135.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            the_data1: ['222']
        }
    },
    mounted() {
        
    },
    methods: {
        
    }
}
</script>

<style lang="less" scoped>
    a {
        color: #999;
        text-decoration: none;
    }
    .index {
        .w1 {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            .w1_1 {
                // border: 1px solid red;
                margin-left: 20px;
            }
            .w1_2 {
                // border: 1px solid red;
                display: flex;
                margin-right: 20px;
                p:nth-last-child(2) {
                    border: 1px solid #00c3ff;
                    color: #00c3ff;
                    height: 20px;
                    font-size: 15px;
                    width: 80px;
                    text-align: center;
                    border-radius: 5px;
                    margin-right: 30px;
                    cursor: pointer;
                }
                p:nth-last-child(1) {
                    border: 1px solid #999;
                    height: 20px;
                    font-size: 15px;
                    width: 50px;
                    text-align: center;
                    border-radius: 5px;
                    cursor: pointer;
                }
            }
        }
        .w22 {
            padding: 20px;
            margin-top: -10px;
            .index1 {
            text-align: center;
            .w2 {
                padding: 10px;
                // border: 1px solid red;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
                .w2_1 {
                    display: flex;
                    align-items: center;
                    .img1 {
                        max-width: 60px;
                        border-radius: 8px;
                        cursor: pointer;
                    }
                    .w2_2 {
                        // border: 1px solid red;
                        margin-left: 20px;
                        span:nth-last-child(3):hover {
                            color: #00c3ff;
                        }
                        span:nth-last-child(3) {
                            font-size: 14px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #666;
                            cursor: pointer;
                        }
                        span:nth-last-child(2) {
                            font-size: 14px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #999;
                            cursor: pointer;
                        }
                        span:nth-last-child(1) {
                            font-size: 14px;
                            display: flex;
                            flex-wrap: wrap;
                            color: #999;
                        }
                    }
                }
                // .plk {
                //     // border: 1px solid red;
                //     margin-right: 30px;
                //     p {
                //         // border: 1px solid red;
                //         display: flex;
                //         align-items: center;
                //         justify-content: center;
                //         border-radius: 20px;
                //         background-color: #00c3ff;
                //         color: white;
                //         height: 26px;
                //         width: 60px;
                //         cursor: pointer;
                //         font-size: 13px;
                //     }
                // }
            }
        }
        }
    }
</style>